<template> 
<div>
    <div class="say" v-for="(v,i) in this.$store.state.arrs" :key="i" >
        <!-- 头 -->
        <div class="saytop" >
            <div class="saytop_1"><img :src="v.imgurl" alt=""></div>
            <div class="saytop_2">
                <span class="wangzhe2">{{v.text1}}</span>&nbsp;&nbsp;
                <span class="wangzhe">{{v.text2}}</span>&nbsp;&nbsp;
                <span class="jinchanchan">{{v.text3}}&nbsp;&nbsp;&nbsp;{{v.text4}}</span>
                <p>{{v.text5}}</p>
            </div>
            <div class="saytop_3">
                <div class="saytop_3_1">关注</div>
            </div>
        </div>
        <!-- 中间 -->
        <div class="saycenter"><div class="zhaohuanshi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#召唤师峡谷</div></div>
        <!-- 下面 -->
        <div class="saybttom">
            <div class="saybttom_top"><div class="tu"><img :src="v.imgurls" alt=""></div></div>
            <div class="saybttom_center"><p>{{v.wenzi}}</p></div>
            <div class="saybttom_di">
                <div> <span class="iconfont icon-dianzan"></span> {{v.num1}}</div>
                <div> <span class="iconfont icon-pinglunxiao"></span> {{v.num2}}</div>
                <div>  <span class="iconfont  icon-fenxiang"></span> {{v.num3}}</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    created(){
       this.$store.dispatch("heisss",{url:"/xiaobai/xiaohei"})
}
}
</script>

<style scoped>
.say{
    width: 100%;
    height: 3rem;
}
.saytop{
    width: 100%;
    height: 25%;
    display: flex;
}

.saycenter{
    width: 100%;
    height: 10%;
    /* background-color: rgb(0, 129, 58); */
}
.saybttom{
    width: 100%;
    height: 65%;
    /* background-color: aqua; */
}
.zhaohuanshi{
    background-color: #eef2f3;
    color: #5d9a9d;
    line-height: 0.3rem;
}
.saytop_1{
    width: 20%;
    height: 100%;
    /* background-color: aqua; */
}
.saytop_1>img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.saytop_2{
    width: 60%;
    height: 100%;
    /* background-color: blue; */
}
.saytop_3{
    width: 20%;
    height: 100%;
    /* background-color: coral; */
}

.jinchanchan{
     font-size: 0.12rem;
    z-index: 55;
    color: #b99a85;
}
.wangzhe{
      background-color: #ebf2f8;
    font-size: 0.12rem;
    color: #7eb2ae;
}
.wangzhe2{
      background-color: #ebf2f8;
    font-size: 0.12rem;
    color: #7eb2ae;
}
.saytop_2>p{
    line-height: 0.25rem;
}
.saytop_3_1{
    width: 80%;
    height: 40%;
    /* border: 0.01rem solid black; */
    text-align: center;
    line-height: 0.3rem;
    border-radius: 0.14rem;
}
.saybttom{
    width: 100%;
    height: 65%;
}
.saybttom_top{
    width: 100%;
    height: 70%;
    /* background-color: tomato; */
}
.saybttom_center{
    width: 100%;
    height: 10%;
    /* background-color: aqua; */
}
.saybttom_di{
    width: 100%;
    height: 20%;
    /* background-color: chartreuse; */
    display: flex;
}
.tu{
    width: 60%;
    height: 100%;
    /* background-color: beige; */
}
.tu img{
    width: 100%;
    height: 100%;
}
.saybttom_di>div{
width: 33%;
height: 100%;
text-align: center;
line-height: 0.4rem;
}
@font-face {
  font-family: "iconfont"; 
  src: url('//at.alicdn.com/t/font_3198550_y1z1w8jiovs.woff2?t=1645528568512') format('woff2'),
       url('//at.alicdn.com/t/font_3198550_y1z1w8jiovs.woff?t=1645528568512') format('woff'),
       url('//at.alicdn.com/t/font_3198550_y1z1w8jiovs.ttf?t=1645528568512') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}

.icon-fenxiang:before {
  content: "\e8b0";
}

</style>